.lc-console {

  .console-head {
    border-bottom: 1px solid #2e2e2e;
    display: flex;
    height: 64px;
    padding: 0 20px;
    align-items: center;
    background-color: #1f1f1f;

    .console-head-title {
      font-size: 16px;
      font-weight: 500;
      color: #bfbfbfff;
    }
  }

  .console-body {
    display: flex;

    .console-list {
      width: 200px;
      height: calc(100vh - 64px);
      background-color: #1f1f1f;
      border-right: 1px solid #2e2e2e;

      .console-list-item:hover {
        background-color: #474747d6;
        cursor: pointer;
      }

      .console-list-item {
        color: #c5c5c5;
        display: flex;
        padding: 5px 10px;
        font-size: 12px;
        height: 50px;
        line-height: 40px;
        transition: background-color 0.5s ease;

        .item-icon {
          margin-right: 8px;
          position: relative;
          top: -1px;

          img {
            width: 14px;
          }
        }
      }
    }

    .console-content {
      width: calc(100vw - 200px);
      height: calc(100vh - 64px);
      background-color: #1f1f1f;
      padding: 15px;
      overflow-y: scroll;

      .content-body {
        .project-list {
          display: flex;
          flex-wrap: wrap;

          .project-item {
            border: 1px solid #3f3f3f;
            margin-right: 20px;
            margin-bottom: 20px;
            background-color: #002D6100;
            border-radius: 2px;
            align-items: center;
            justify-content: center;
            display: flex;
            color: whitesmoke;
            position: relative;
            overflow: hidden;
            background-size: 100%;
            background-position: center center;

            .pro-list-content {
              display: flex;
              z-index: 1;
              flex-direction: column;
              align-items: center;

              .pro-content-title {
                font-size: 18px;
                transform: translateY(20px);
                transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
              }

              .pro-content-operates {
                margin-top: 10px;
                display: flex;
                opacity: 0;
                transform: translateY(20px);
                transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s;

                .operate-item {
                  cursor: pointer;
                  width: 30px;
                  height: 30px;
                  margin: 0 10px;
                  background-color: rgba(0, 68, 88, 0.51);
                  border: 1px solid #0f7ba7;
                  border-radius: 15px;
                  text-align: center;

                  img {
                    width: 16px;
                    position: relative;
                    top: 1px;
                    left: 0.6px;
                    pointer-events: none;
                  }
                }
              }
            }

            .pro-content-footer {
              position: absolute;
              bottom: 5px;
              right: 10px;
              display: flex;
              align-items: center;

              .state-point {
                animation: fade 2s infinite;
                width: 5px;
                height: 5px;
                border-radius: 5px;
              }

              .state-text {
                opacity: 0.7;
                transform-origin: center center;
                transform: scale(0.8);
              }
            }
          }

          .project-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1);
          }

          .project-item:hover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.5s;
          }

          .project-item:hover {
            background-size: 120%;
            transition: background-size 0.5s;

            .pro-list-content {
              .pro-content-title {
                transform: translateY(-10px);
              }

              .pro-content-operates {
                transform: translateY(0);
                opacity: 1;
              }
            }
          }

          .project-item:not(:hover) {
            background-size: 100%;
            transition: background-size 0.5s;
          }

          .project-item:hover::before {
            opacity: 1;
          }
        }
      }
    }
  }


  .lc-new-screen-dialog {
    .lc-new-screen-item {
      display: flex;
    }
  }

}

@keyframes fade {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}